<template>
  <div>
    <Row>
      <Col span="7">
        <Card style="width: 320px">
          <div style="text-align: center">
            <img src="../../assets/me.jpg" />
            <h3>liz</h3>
            <br />
            <h5><Icon type="ios-briefcase" />李子科技有限公司</h5>
            <br />
          </div>
          <br />
          <Icon type="md-desktop" /> web前端开发工程师
          <br />
          <br />
          <Icon type="md-construct" /> 前端cv工程师干啥啥不会吃啥啥不会
          <br />
          <br />
          <Icon type="ios-home" /> 重庆市渝北区
          <br />
          <br />
          <Divider />
          <Tag
            v-for="item in count"
            :key="item"
            :name="item"
            closable
            @on-close="handleClose2"
            >{{ item }}</Tag
          >
          <Input
            type="text"
            v-model="langs"
            @on-keyup.enter="add"
            v-show="show"
          />
          <Button icon="ios-add" type="dashed" size="small" @click="handleAdd"
            >添加标签</Button
          >
        </Card>
      </Col>
      <Col span="17" class="arti">
        <Tabs value="name1">
          <TabPane label="文章" name="name1">
            <List item-layout="vertical">
              <ListItem v-for="item in actcleData" :key="item.title">
                <ListItemMeta
                  :avatar="item.avatar"
                  :title="item.title"
                  :description="item.description"
                />
                {{ item.content }}
                <template slot="action">
                  <li><Icon type="ios-star-outline" /> 123</li>
                  <li><Icon type="ios-thumbs-up-outline" /> 234</li>
                  <li><Icon type="ios-chatbubbles-outline" /> 345</li>
                </template>
                <template slot="extra">
                  <img
                    src="https://api.dujin.org/bing/1920.php"
                    style="width: 250px; height: 150px; border-radius: 0%"
                  />
                </template>
                <br />
                <footer>发表于 {{ item.datatime | formatDate }}</footer>
              </ListItem>
            </List>
          </TabPane>
          <TabPane label="框架推荐" name="name2">
            <Row :gutter="16">
              <Col span="12">
                <Card>
                  <div>
                    <img
                      src="../../assets/1.png"
                      style="width: 100%; height: 200px; border-radius: 0"
                    />
                    <a href="https://cn.vuejs.org/" target="blank">vue.js</a>
                    <h4>Whatever is worth doing is worth doing well</h4>
                  </div>
                </Card>
                <Divider />
                <Card>
                  <div>
                    <img
                      src="../../assets/2.png"
                      style="width: 100%; height: 200px; border-radius: 0"
                    />
                    <a href="https://element.eleme.cn/#/zh-CN" target="blank"
                      >element ui</a
                    >
                    <h4>In love folly is always sweet.</h4>
                  </div>
                </Card>
                <Divider />
                <Card>
                  <div>
                    <img
                      src="../../assets/3.png"
                      style="width: 100%; height: 200px; border-radius: 0"
                    />
                    <a href="https://www.iviewui.com/" target="blank"
                      >iView ui</a
                    >
                    <h4>I’ll think of you every step of the way.</h4>
                  </div>
                </Card>
                <Divider />
              </Col>
              <Col span="12">
                <Card>
                  <div>
                    <img
                      src="../../assets/4.png"
                      style="width: 100%; height: 200px; border-radius: 0"
                    />
                    <a href="https://react.docschina.org/" target="blank"
                      >react</a
                    >
                    <h4>pain past is pleasure.</h4>
                  </div>
                </Card>
                <Divider />
                <Card>
                  <div>
                    <img
                      src="../../assets/5.png"
                      style="width: 100%; height: 200px; border-radius: 0"
                    />
                    <a
                      href="https://echarts.apache.org/zh/index.html"
                      target="blank"
                      >echarts</a
                    >
                    <h4>
                      You may be out of my sight, but never out of my mind.
                    </h4>
                  </div>
                </Card>
                <Divider
              /></Col>
            </Row>
          </TabPane>
          <TabPane label="留言回复" name="name3">
            <Badge :count="Total">
              <img src="../../assets/me.jpg" />
            </Badge>
            <Card>
              <p slot="title">待回复</p>
              <List item-layout="vertical">
                <ListItem v-for="item in messageData" :key="item.id">
                  <ListItemMeta
                    :title="item.username"
                    :description="item.userEmail"
                  />
                  {{ item.content }}
                  <template slot="extra" style="text-align: center">
                    <Button type="warning" ghost @click="reply(item.id)"
                      >回复</Button
                    >
                  </template>
                </ListItem>
              </List>
            </Card>
            <Card>
              <p slot="title">已回复</p>
              <List item-layout="vertical">
                <ListItem v-for="item in replied_messageData" :key="item.id">
                  <ListItemMeta
                    :title="item.username"
                    :description="item.userEmail"
                  />
                  留言：{{ item.content }}
                  <br>
                  回复：{{ item.replied }}
                  <template slot="extra" style="text-align: center">
                    <Button type="success" ghost>已回复</Button>
                  </template>
                </ListItem>
              </List>
            </Card>
          </TabPane>
        </Tabs></Col
      >
    </Row>
    <Modal
      v-model="modal"
      title="回复留言"
      :styles="{ top: '300px' }"
      @on-ok="ok"
      @on-cancel="cancel"
    >
      id:{{ this.updateid }}
      <Input
      ref="replied"
        v-model="replied"
        type="textarea"
        placeholder="请输入回复信息"
      ></Input>
    </Modal>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      updateid: '',
      replied: '',
      modal: false,
      Total: 0,
      replied_messageData: [],
      messageData: [],
      actcleData: [],
      langs: '',
      show: false,
      count: ['没钱', '穷b', '异想天开', '不服就干', '你干嘛']
    }
  },
  mounted() {
    this.getanthor_art()
    this.getleave_messageData()
    this.getreplied_messageData()
  },
  methods: {
    getreplied_messageData() {
      axios.get('/liz/replied_message').then((res) => {
        if (res.data.status !== 200) {
          this.$Message.error(res.data.message)
        } else {
          this.replied_messageData = res.data.data
          this.Total = this.messageData.length
        }
      })
    },
    reply(id) {
      this.modal = true
      this.updateid = id
      // axios.get(`/liz/delmessage/${id}`).then((res) => {
      //   if (res.data.status === 200) {
      //     this.$Message.success('回复成功')
      //     this.getleave_messageData()
      //     this.getreplied_messageData()
      //   } else {
      //     this.$Message.error(res.data.message)
      //   }
      // })
    },
    cancel() {
      this.replied = ''
    },
    ok() {
      const params = new URLSearchParams()
      params.append('replied', this.replied)
      params.append('id', this.updateid)
      axios.post('/liz/replied', params).then((res) => {
        if (res.data.status === 200) {
          axios.get(`/liz/delmessage/${this.updateid}`).then((res) => {
            if (res.data.status === 200) {
              this.$Message.success('回复成功')
              this.getleave_messageData()
              this.getreplied_messageData()
            } else {
              this.$Message.error(res.data.message)
            }
          })
        } else {
          this.$Message.error(res.data.message)
        }
      })
    },
    getleave_messageData() {
      axios.get('/liz/getAnthor_message').then((res) => {
        if (res.data.status !== 200) {
          this.$Message.error(res.data.message)
        } else {
          this.messageData = res.data.data
          this.Total = this.messageData.length
        }
      })
    },
    getanthor_art() {
      axios.get('/liz/anthor_art').then((res) => {
        if (res.data.status !== 200) {
          this.$Message.error(res.data.message)
          console.log(res.data.message)
        } else {
          this.actcleData = res.data.data
          this.$Message.success('获取成功')
          console.log(res.data)
        }
      })
    },
    add() {
      this.count.push(this.langs)
      this.show = false
    },
    handleAdd() {
      this.show = true
      this.langs = ''
    },
    handleClose2(event, name) {
      const index = this.count.indexOf(name)
      this.count.splice(index, 1)
    }
  }
}
</script>

<style lang="less" scoped>
.arti.ivu-col.ivu-col-span-17 {
  height: 600px;
  overflow: auto;
}
img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
/*滚动条bai整体*/
::-webkit-scrollbar {
  width: 5px; /*滚动条宽度*/
}
::-webkit-scrollbar-track {
  background-color: grey; /*滑道全部*/
}
::-webkit-scrollbar-track-piece {
  background-color: gainsboro; /*滑道*/
  -webkit-border-radius: 5px; /*滑道圆角宽度*/
}
::-webkit-scrollbar-thumb {
  background-color: grey; /*滑动条表面*/
  border: solid 1px grey; /*滑动条边框*/
  border-radius: 4px; /*滑动条圆角宽度*/
}
/*横竖滚动条交角*/
::-webkit-scrollbar-corner {
  background-color: #00ffff;
}
/*横竖滚动条交角图案*/
::-webkit-resizer {
  /*background-image: url(/public/img/resizer-inactive.png);*/
  background-repeat: no-repeat;
  background-position: bottom right;
}
.ivu-tabs {
  border: 1px solid #eeeeee;
  padding: 5px;
}
</style>
